<!--
    /**
     * @author RaoShuang
     * @emil 991207823@qq.com
     * @date 2020/11/23 22:23
     */
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象属性(对象集合)</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
            <p>遍历集合中对象的属性</p>
			<table border="1">
				<tr>
					<td>序号号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
                <tr v-for="(product,index) in products ">
                    <td>{{index}}</td>
                    <td>{{product.id}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.price}}</td>
                </tr>
			</table>
		</div>
	</body>
	<script>
		//view model
        new Vue({
            el:"#app",
            data:{
                products:[
                    {id: 1, name: "笔记本电脑", price: 5000},
                    {id: 2, name: "手机", price: 3000},
                    {id: 3, name: "电视", price: 4000},
                    {id: 4, name: "游戏机", price: 1000},
                    {id: 5, name: "画屏", price: 2000}
                ]
            }
        });
	</script>

</html>